import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import {Button, message, Form, Alert } from 'antd';
import { connect } from 'dva';
import {abs} from '@/utils/utils';

const FormItem = Form.Item;
@Form.create()
class ReceivingGoodsComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            price: props.param.RefundFee
        }
    }

    componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
      }

    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    handleSubmit = e => {
        e.preventDefault();
        const { dispatch } = this.props;
        const {price} = this.state;
        this.props.form.validateFields((err, values) => {
            if(!err) {
                dispatch({
                    type: 'orderRight/ComfirmReturn',
                    payload: {
                        Id: this.props.param.Id,
                        // Fee: price
                    },
                    callBack: {
                        success: res => {
                            if(res.Code===0) {
                                message.success('提交成功');
                                this.props.ok();
                            }
                        },
                        error: res => {
                            message.error(res.Msg)
                        }
                    }
                })
            }
        })
    }

    render() {
        const {loading1} = this.props;
        const formItemLayout = {
            labelCol: {
                span: 5,
              },
              wrapperCol: {
                span: 19,
              },
          }
        return (
            <Form onSubmit={this.handleSubmit}>
                <Alert
                    message="该笔订单通过“微信支付”付款，需你同意退款申请，买家才能退货给你；买家退货后你需再次确认收货后，退款将自动原路退回至买家付款账户。"
                    type="warning"
                    showIcon
                    style={{margin: 24}}
                />
                <FormItem {...formItemLayout} label="退款方式" style={{marginBottom: 0}}>退货退款</FormItem>
                <FormItem {...formItemLayout} label="退款金额" style={{marginBottom: 0}}>￥{abs(this.props.param.RefundFee,2)}</FormItem>
                <FormItem {...formItemLayout} label="退货地址" style={{marginBottom: 8}}>{this.props.param.ReturnAddr}</FormItem>
                <FormItem className="xkd-model-footBtn">
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={loading1}
                    >
                        确认收货退款
                    </Button>
                </FormItem>
            </Form>
        )
    }
}

const ReceivingGoods = createModalContainer(
    connect(({orderRight, global, loading}) =>({
        orderRight,
        loading1: loading.effects['orderRight/ComfirmReturn'],
    }))(ReceivingGoodsComponent),
    true,
    true
);

export default ReceivingGoods;